<title>卡片</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">卡片</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">基本元素</a></li>
	 				<li class="breadcrumb-item active">卡片</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
	<!-- eCommerce & Project statistic -->
<section id="ecommerce-stats">
    <div class="row">
        <div class="col-xl-4 col-lg-6 col-md-12">
            <div class="card ecom-card-1 bg-white">
                <div class="card-content ecom-card2 height-180">
                    <h5 class="text-muted danger position-absolute p-1">
                        Progress Stats</h5>
                    <div>
                        <i class="icon-pie-chart danger font-large-1 float-right p-1"></i>
                    </div>
                    <div class="progress-stats-container ct-golden-section height-75 position-relative pt-3">
                        <div id="progress-stats-bar-chart"></div>
                        <div id="progress-stats-line-chart" class="progress-stats-shadow"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6 col-md-12">
            <div class="card ecom-card-1 bg-white">
                <div class="card-content ecom-card2 height-180">
                    <h5 class="text-muted success position-absolute p-1">
                        Progress Stats</h5>
                    <div>
                        <i class="icon-pie-chart success font-large-1 float-right p-1"></i>
                    </div>
                    <div class="progress-stats-container ct-golden-section height-75 position-relative pt-3">
                        <div id="progress-stats-bar-chart1"></div>
                        <div id="progress-stats-line-chart1" class="progress-stats-shadow"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-12">
            <div class="card ecom-card-1 bg-white">
                <div class="card-content ecom-card2 height-180">
                    <h5 class="text-muted primary position-absolute p-1">
                        Progress Stats</h5>
                    <div>
                        <i class="icon-pie-chart primary font-large-1 float-right p-1"></i>
                    </div>
                    <div class="progress-stats-container ct-golden-section height-75 position-relative pt-3">
                        <div id="progress-stats-bar-chart2"></div>
                        <div id="progress-stats-line-chart2" class="progress-stats-shadow"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-4 col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Project X</h4>

                    <div class="heading-elements">
                        <ul class="list-inline d-block mb-0">
                            <li>
                                <a class="btn btn-sm btn-info box-shadow-3 round btn-min-width pull-right" href="#" target="_blank">In Progress</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body pt-0 pb-1">
                        <h6 class="text-bold-600"> Task Completed:
                            <span>4/10</span>
                        </h6>
                        <div class="progress progress-sm mt-1 mb-0 box-shadow-2">
                            <div class="progress-bar bg-gradient-x-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <div class="media d-flex">
                            <div class="align-self-center">
                                <h6 class="text-bold-600 mt-2"> Client:
                                    <span class="info">Xeon Inc.</span>
                                </h6>
                                <h6 class="text-bold-600 mt-1"> Deadline:
                                    <span class="blue-grey">5th June, 2018</span>
                                </h6>
                            </div>
                            <div class="media-body text-right mt-2">
                                <ul class="list-unstyled users-list">
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-19.png" alt="Avatar">
                                    </li>
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-18.png" alt="Avatar">
                                    </li>
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Joseph Weaver" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-17.png" alt="Avatar">
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Project Y</h4>
                    <div class="heading-elements">
                        <ul class="list-inline d-block mb-0">
                            <li>
                                <a class="btn btn-sm btn-warning box-shadow-3 round btn-min-width pull-right" href="#" target="_blank">Completed</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body pt-0 pb-1">
                        <h6 class="text-bold-600"> Task Completed:
                            <span>10/10</span>
                        </h6>
                        <div class="progress progress-sm mt-1 mb-0 box-shadow-2">
                            <div class="progress-bar bg-gradient-x-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
                                aria-valuemax="100"></div>
                        </div>
                        <div class="media d-flex">
                            <div class="align-self-center">
                                <h6 class="text-bold-600 mt-2"> Client:
                                    <span class="warning">Foxit Corp</span>
                                </h6>
                                <h6 class="text-bold-600 mt-1"> Deadline:
                                    <span class="blue-grey">11th May, 2018</span>
                                </h6>
                            </div>
                            <div class="media-body text-right mt-2">
                                <ul class="list-unstyled users-list">
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-11.png" alt="Avatar">
                                    </li>
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-12.png" alt="Avatar">
                                    </li>
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Joseph Weaver" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-13.png" alt="Avatar">
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-12">
            <div class="card ">
                <div class="card-header bg-hexagons">
                    <h4 class="card-title ">Statistics</h4>
                    <div class="heading-elements">
                        <ul class="list-inline d-block mb-0">
                            <li>
                                <a class="btn btn-sm btn-danger danger box-shadow-3 round btn-min-width pull-right" href="#" target="_blank">
                                    <span class="white">Report</span>
                                    <i class="ft-bar-chart pl-1 white"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show bg-hexagons">
                    <div class="card-body pt-0 pb-1">
                        <div class="media d-flex">
                            <div class="align-self-center width-100">
                                <div id="statistics-donut-chart" class="height-100 donutShadow"></div>
                            </div>
                            <div class="media-body text-right mt-2">
                                <h3 class=" font-large-2 blue-grey lighten-1 ">35,656
                                </h3>
                                <h6 class="mt-1">
                                    <span class="text-muted">tasks completed in the
                                        <a href="#" class="darken-2">last year.</a>
                                    </span>
                                </h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="row match-height">
        <div class="col-xl-4 col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header ">
                    <!-- <h4 class="card-title">New Customers</h4> -->
                    <a class="heading-elements-toggle">
                        <i class="la la-ellipsis-v font-medium-3"></i>
                    </a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li>
                                <a data-action="reload">
                                    <i class="ft-rotate-cw"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body text-center">
                        <div class="card-header pt-0 pb-0">
                            <p class="danger darken-2">Total Customers</p>
                            <h3 class="display-4 blue-grey lighten-1">14,962</h3>
                        </div>
                        <div class="card-content">
                            <div id="new-customers" class="height-150 newCustomersdonutShadow"></div>
                            <ul class="list-inline clearfix mt-2">
                                <li>
                                    <h1 class="blue-grey lighten-1 text-bold-400">1465</h1>
                                    <span class="danger darken-2">
                                        <i class="ft-user"></i> Average New Customers</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header ">
                    <!-- <h4 class="card-title">New Projects</h4> -->
                    <a class="heading-elements-toggle">
                        <i class="la la-ellipsis-v font-medium-3"></i>
                    </a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li>
                                <a data-action="reload">
                                    <i class="ft-rotate-cw"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body text-center">
                        <div class="card-header pt-0 pb-0">
                            <p class="info darken-2">Total Projects</p>
                            <h3 class="display-4 blue-grey lighten-1">3,527</h3>
                        </div>
                        <div class="card-content">
                            <div id="new-projects" class="height-150 newProjectsdonutShadow"></div>
                            <ul class="list-inline clearfix mt-2">
                                <li>
                                    <h1 class="blue-grey lighten-1 text-bold-400">526</h1>
                                    <span class="info darken-2">
                                        <i class="ft-airplay"></i> Average New Projects</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-12">
            <div class="card">
                <div class="card-header ">
                    <!-- <h4 class="card-title">Tasks Completed</h4> -->
                    <a class="heading-elements-toggle">
                        <i class="la la-ellipsis-v font-medium-3"></i>
                    </a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li>
                                <a data-action="reload">
                                    <i class="ft-rotate-cw"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body text-center">
                        <div class="card-header pt-0 pb-0">
                            <p class="warning darken-2">Total Tasks</p>
                            <h3 class="display-4 blue-grey lighten-1">32,225</h3>
                        </div>
                        <div class="card-content">
                            <div id="tasks-completed" class="height-150 tasksCompleteddonutShadow"></div>
                            <ul class="list-inline clearfix mt-2">
                                <li>
                                    <h1 class="blue-grey lighten-1 text-bold-400">6525</h1>
                                    <span class="warning darken-2">
                                        <i class="ft-layers"></i> Average New Tasks</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-8 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Today's Tasks</h4>
                    <a class="heading-elements-toggle">
                        <i class="fa fa-ellipsis-v font-medium-3"></i>
                    </a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li>
                                <a class="btn btn-sm btn-danger box-shadow-2 round btn-min-width pull-right" href="#">New Task</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body  pl-0 pr-0">
                    <div id="todays-tasks">

                        <div class="table-responsive">
                            <table class="table table-padded mb-0" id="product-summary">
                                <tbody>
                                    <tr>
                                        <td class="text-truncate border-0">
                                            <input type="checkbox" class="chk-task">
                                        </td>
                                        <td class="text-truncate border-0  pl-0">
                                            <span class="list-group-item-heading">Phasellus vel elit volutpat, egestas urna a seto.</span>
                                        </td>
                                        <td class="text-truncate border-0">
                                            <span class="badge badge-danger">Meeting</span>
                                        </td>
                                        <td class="text-truncate border-0">
                                            <ul class="list-unstyled users-list m-0 text-right">
                                                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe" class="avatar avatar-sm pull-up">
                                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-19.png" alt="Avatar">
                                                </li>
                                                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
                                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-18.png" alt="Avatar">
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-truncate border-0">
                                            <input type="checkbox" class="chk-task">
                                        </td>
                                        <td class="text-truncate border-0 pl-0">
                                            <span class="list-group-item-heading text-decoration">Proin varius libero at magna dignissim lacinia uyi kiotronomol nagyu.</span>
                                        </td>
                                        <td class="text-truncate border-0">
                                            <span class="badge badge-warning">Work</span>
                                        </td>
                                        <td class="text-truncate border-0">
                                            <ul class="list-unstyled users-list m-0 text-right">
                                                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe" class="avatar avatar-sm pull-up">
                                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-15.png" alt="Avatar">
                                                </li>
                                                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Joseph Weaver" class="avatar avatar-sm pull-up">
                                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-14.png" alt="Avatar">
                                                </li>
                                                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
                                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-18.png" alt="Avatar">
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-truncate border-0">
                                            <input type="checkbox" class="chk-task">
                                        </td>
                                        <td class="text-truncate border-0 pl-0">
                                            <span class="list-group-item-heading">Curabitur tempor, quam vel pulvinar finibus.</span>
                                        </td>
                                        <td class="text-truncate border-0">
                                            <span class="badge badge-primary">Store</span>
                                        </td>
                                        <td class="text-truncate border-0">
                                            <ul class="list-unstyled users-list m-0 text-right">
                                                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe" class="avatar avatar-sm pull-up">
                                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-11.png" alt="Avatar">
                                                </li>
                                                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
                                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-12.png" alt="Avatar">
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-truncate border-0">
                                            <input type="checkbox" class="chk-task">
                                        </td>
                                        <td class="text-truncate border-0 pl-0">
                                            <span class="list-group-item-heading text-decoration">Donec pulvinar nisi ac convallis porta fo moniloiuk yunata.</span>
                                        </td>
                                        <td class="text-truncate border-0">
                                            <span class="badge badge-success">Documents</span>
                                        </td>
                                        <td class="text-truncate border-0">
                                            <ul class="list-unstyled users-list m-0 text-right">
                                                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Joseph Weaver" class="avatar avatar-sm pull-up">
                                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-10.png" alt="Avatar">
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-truncate border-0">
                                            <input type="checkbox" class="chk-task">
                                        </td>
                                        <td class="text-truncate border-0 pl-0">
                                            <span class="list-group-item-heading">Aliquam finibus tellus magna.</span>
                                        </td>
                                        <td class="text-truncate border-0">
                                            <span class="badge badge-danger">Analysis</span>
                                        </td>
                                        <td class="text-truncate border-0">
                                            <ul class="list-unstyled users-list m-0 text-right">
                                                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe" class="avatar avatar-sm pull-up">
                                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-12.png" alt="Avatar">
                                                </li>
                                                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
                                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-15.png" alt="Avatar">
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-truncate border-0">
                                            <input type="checkbox" class="chk-task">
                                        </td>
                                        <td class="text-truncate border-0 pl-0">
                                            <span class="list-group-item-heading">Donut sweet roll marzipan pastry cookie cake tootsie.</span>
                                        </td>
                                        <td class="text-truncate border-0">
                                            <span class="badge badge-warning">Task</span>
                                        </td>
                                        <td class="text-truncate border-0">
                                            <ul class="list-unstyled users-list m-0 text-right">
                                                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe" class="avatar avatar-sm pull-up">
                                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-12.png" alt="Avatar">
                                                </li>
                                                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
                                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-15.png" alt="Avatar">
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Recent Buyers</h4>
                    <a class="heading-elements-toggle">
                        <i class="fa fa-ellipsis-v font-medium-3"></i>
                    </a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li>
                                <a data-action="reload">
                                    <i class="ft-rotate-cw"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div id="recent-buyers" class="media-list">
                        <a href="#" class="media border-0">
                            <div class="media-left pr-1">
                                <span class="avatar avatar-md avatar-online">
                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-7.png" alt="Generic placeholder image">
                                    <i></i>
                                </span>
                            </div>
                            <div class="media-body w-100">
                                <span class="list-group-item-heading">Kristopher Candy

                                </span>
                                <ul class="list-unstyled users-list m-0 float-right">
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Product 1" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle no-border-top-radius no-border-bottom-radius" src="assets/images/portfolio/portfolio-1.jpg"
                                            alt="Avatar">
                                    </li>
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Product 2" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle no-border-top-radius no-border-bottom-radius" src="assets/images/portfolio/portfolio-2.jpg"
                                            alt="Avatar">
                                    </li>
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Product 3" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle no-border-top-radius no-border-bottom-radius" src="assets/images/portfolio/portfolio-4.jpg"
                                            alt="Avatar">
                                    </li>

                                </ul>

                                <p class="list-group-item-text mb-0">
                                    <span class="blue-grey lighten-2 font-small-3"> #INV-12332 </span>
                                </p>

                            </div>
                        </a>

                        <a href="#" class="media border-0">
                            <div class="media-left pr-1">
                                <span class="avatar avatar-md avatar-away">
                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-8.png" alt="Generic placeholder image">
                                    <i></i>
                                </span>
                            </div>
                            <div class="media-body w-100">
                                <span class="list-group-item-heading">Lawrence Fowler

                                </span>
                                <ul class="list-unstyled users-list m-0 float-right">
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Product 1" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle no-border-top-radius no-border-bottom-radius" src="assets/images/portfolio/portfolio-5.jpg"
                                            alt="Avatar">
                                    </li>
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Product 2" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle no-border-top-radius no-border-bottom-radius" src="assets/images/portfolio/portfolio-6.jpg"
                                            alt="Avatar">
                                    </li>

                                </ul>

                                <p class="list-group-item-text mb-0">
                                    <span class="blue-grey lighten-2 font-small-3"> #INV-12333 </span>

                                </p>
                            </div>
                        </a>
                        <a href="#" class="media border-0">
                            <div class="media-left pr-1">
                                <span class="avatar avatar-md avatar-busy">
                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-9.png" alt="Generic placeholder image">
                                    <i></i>
                                </span>
                            </div>
                            <div class="media-body w-100">
                                <span class="list-group-item-heading">Linda Olson

                                </span>
                                <ul class="list-unstyled users-list m-0 float-right">
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Product 1" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle no-border-top-radius no-border-bottom-radius" src="assets/images/portfolio/portfolio-2.jpg"
                                            alt="Avatar">
                                    </li>
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Product 2" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle no-border-top-radius no-border-bottom-radius" src="assets/images/portfolio/portfolio-5.jpg"
                                            alt="Avatar">
                                    </li>

                                </ul>

                                <p class="list-group-item-text mb-0">
                                    <span class="blue-grey lighten-2 font-small-3"> #INV-12334 </span>

                                </p>
                            </div>
                        </a>
                        <a href="#" class="media border-0">
                            <div class="media-left pr-1">
                                <span class="avatar avatar-md avatar-online">
                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-10.png" alt="Generic placeholder image">
                                    <i></i>
                                </span>
                            </div>
                            <div class="media-body w-100">
                                <span class="list-group-item-heading">Roy Clark

                                </span>
                                <ul class="list-unstyled users-list m-0 float-right">
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Product 1" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle no-border-top-radius no-border-bottom-radius" src="assets/images/portfolio/portfolio-6.jpg"
                                            alt="Avatar">
                                    </li>
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Product 2" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle no-border-top-radius no-border-bottom-radius" src="assets/images/portfolio/portfolio-1.jpg"
                                            alt="Avatar">
                                    </li>

                                </ul>

                                <p class="list-group-item-text mb-0">
                                    <span class="blue-grey lighten-2 font-small-3"> #INV-12335 </span>

                                </p>
                            </div>
                        </a>
                        <a href="#" class="media border-0">
                            <div class="media-left pr-1">
                                <span class="avatar avatar-md avatar-online">
                                    <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-11.png" alt="Generic placeholder image">
                                    <i></i>
                                </span>
                            </div>
                            <div class="media-body w-100">
                                <span class="list-group-item-heading">Kristopher Candy

                                </span>
                                <ul class="list-unstyled users-list m-0 float-right">
                                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Product 1" class="avatar avatar-sm pull-up">
                                        <img class="media-object rounded-circle no-border-top-radius no-border-bottom-radius" src="assets/images/portfolio/portfolio-5.jpg"
                                            alt="Avatar">
                                    </li>

                                </ul>

                                <p class="list-group-item-text mb-0">
                                    <span class="blue-grey lighten-2 font-small-3"> #INV-12336 </span>

                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-4 col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Project ABC</h4>
                    <a class="heading-elements-toggle">
                        <i class="la la-ellipsis-v font-medium-3"></i>
                    </a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li>
                                <a data-action="reload">
                                    <i class="ft-rotate-cw"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="col-12 timeline-left" id="activity">
                            <div class="timeline">
                                <ul class="list-unstyled base-timeline activity-timeline">
                                    <li>
                                        <div class="timeline-icon bg-danger">
                                            <i class="ft-users font-medium-1"></i>
                                        </div>
                                        <div class="act-time">July, 2019</div>
                                        <div class="base-timeline-info">
                                            <a href="#" class="text-danger">Implementation</a>
                                        </div>
                                        <ul class="base-timeline-sub list-unstyled users-list m-0">
                                            <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe" class="avatar avatar-sm pull-up">
                                                <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-13.png" alt="Avatar">
                                            </li>
                                            <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
                                                <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-17.png" alt="Avatar">
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <div class="timeline-icon bg-primary">
                                            <i class="ft-monitor font-medium-1"></i>
                                        </div>
                                        <div class="act-time">Feb, 2018</div>
                                        <div class="base-timeline-info">
                                            <a href="#" class="text-primary">Development</a>
                                        </div>
                                        <ul class="base-timeline-sub list-unstyled users-list m-0">
                                            <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe" class="avatar avatar-sm pull-up">
                                                <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-14.png" alt="Avatar">
                                            </li>
                                            <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
                                                <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-13.png" alt="Avatar">
                                            </li>
                                            <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Joseph Weaver" class="avatar avatar-sm pull-up">
                                                <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-12.png" alt="Avatar">
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <div class="timeline-icon bg-info">
                                            <i class="ft-feather font-medium-1"></i>
                                        </div>
                                        <div class="act-time">Sep, 2017</div>
                                        <div class="base-timeline-info">
                                            <a href="#" class="text-info">Design</a>
                                        </div>
                                        <ul class="base-timeline-sub list-unstyled users-list m-0">
                                            <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe" class="avatar avatar-sm pull-up">
                                                <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-16.png" alt="Avatar">
                                            </li>
                                            <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
                                                <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-15.png" alt="Avatar">
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <div class="timeline-icon bg-warning">
                                            <i class="ft-activity font-medium-1"></i>
                                        </div>
                                        <div class="act-time">Dec, 2016</div>
                                        <div class="base-timeline-info">
                                            <a href="#" class="text-warning">Analysis</a>
                                        </div>
                                        <ul class="base-timeline-sub list-unstyled users-list m-0">
                                            <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="John Doe" class="avatar avatar-sm pull-up">
                                                <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-19.png" alt="Avatar">
                                            </li>
                                            <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Katherine Nichols" class="avatar avatar-sm pull-up">
                                                <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-18.png" alt="Avatar">
                                            </li>
                                            <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Joseph Weaver" class="avatar avatar-sm pull-up">
                                                <img class="media-object rounded-circle" src="assets/images/portrait/small/avatar-s-17.png" alt="Avatar">
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Chat</h4>
                    <a class="heading-elements-toggle">
                        <i class="la la-ellipsis-v font-medium-3"></i>
                    </a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li>
                                <a data-action="reload">
                                    <i class="ft-rotate-cw"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body chat-application">
                        <div class="chats height-300 position-relative">
                            <div class="chats">
                                <div class="chat">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="">
                                            <img src="assets/images/avatar/default.png" alt="avatar" />
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>How can we help? We're here for you!</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="chat chat-left">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="left" title="" data-original-title="">
                                            <img src="assets/images/avatar/default.png" alt="avatar" />
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>Hey Jacob, Could you please help me to find it out?</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="chat">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="">
                                            <img src="assets/images/avatar/default.png" alt="avatar" />
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>Absolutely!</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="chat chat-left">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="left" title="" data-original-title="">
                                            <img src="assets/images/avatar/default.png" alt="avatar" />
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>I am looking for the best Angular admin template.</p>
                                            <p>It should be Bootstrap 4 compatible.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="chat">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="">
                                            <img src="assets/images/avatar/default.png" alt="avatar" />
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>Crest admin is the responsive Angular 5 bootstrap 4 admin template.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="chat chat-left">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="left" title="" data-original-title="">
                                            <img src="assets/images/avatar/default.png" alt="avatar" />
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>Looks clean and fresh UI.</p>
                                        </div>
                                        <div class="chat-content">
                                            <p>It's perfect for my next project.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="chat">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="">
                                            <img src="assets/images/avatar/default.png" alt="avatar" />
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>Thanks a lot!</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="chat chat-left">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="left" title="" data-original-title="">
                                            <img src="assets/images/avatar/default.png" alt="avatar" />
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>How can I purchase it?</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="chat">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="">
                                            <img src="assets/images/avatar/default.png" alt="avatar" />
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>From Wrapbootstrap.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="chat chat-left">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="left" title="" data-original-title="">
                                            <img src="assets/images/avatar/default.png" alt="avatar" />
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>I will purchase it for sure.</p>
                                        </div>
                                        <div class="chat-content">
                                            <p>Thanks.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="chat">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="">
                                            <img src="assets/images/avatar/default.png" alt="avatar" />
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>Great!!</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <form class="chat-app-input mt-1 row">
                            <fieldset class="form-group position-relative has-icon-left col-xl-9 col-lg-9 col-9 m-0 mb-1">
                                <div class="form-control-position">
                                    <i class="icon-emoticon-smile"></i>
                                </div>
                                <input type="text" class="form-control" id="iconLeft4" placeholder="Type your message">
                                <div class="form-control-position control-position-right">
                                    <i class="ft-image"></i>
                                </div>
                            </fieldset>
                            <fieldset class="form-group position-relative has-icon-left col-xl-3 col-lg-3 col-3 m-0">
                                <button type="button" class="btn btn-primary">
                                    <i class="ft-navigation white"></i>
                                </button>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Project Status</h4>
                    <a class="heading-elements-toggle">
                        <i class="la la-ellipsis-v font-medium-3"></i>
                    </a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li>
                                <a data-action="reload">
                                    <i class="ft-rotate-cw"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="project">
                            <div class="project-a mb-2">
                                <p class="m-0 blue-grey darken-4">Project A
                                    <span class="sucess float-right">Deadline: July,2019</span>
                                </p>
                                <div class="progress mt-1 mb-0" style="height: 7px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                            <div class="project-b  mb-2">
                                <p class="m-0 blue-grey darken-4">Project B
                                    <span class="float-right">Deadline: Dec ,2020</span>
                                </p>
                                <div class="progress mt-1 mb-0" style="height: 7px;">
                                    <div class="progress-bar bg-danger" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                            <div class="project-c  mb-2">
                                <p class="m-0 blue-grey darken-4">Project C
                                    <span class="float-right">Deadline: Aug ,2021</span>
                                </p>
                                <div class="progress mt-1 mb-0" style="height: 7px;">
                                    <div class="progress-bar bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                            <div class="project-d  mb-2">
                                <p class="m-0 blue-grey darken-4">Project D
                                    <span class="float-right">Deadline: May ,2019</span>
                                </p>
                                <div class="progress mt-1 mb-0" style="height: 7px;">
                                    <div class="progress-bar bg-info" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                            <div class="project-e  mb-2">
                                <p class="m-0 blue-grey darken-4">Project E
                                    <span class="float-right">Deadline: Sept ,2020</span>
                                </p>
                                <div class="progress mt-1 mb-0" style="height: 7px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                            <div class="project-f">
                                <p class="m-0 blue-grey darken-4">Project F
                                    <span class="float-right">Deadline: Feb ,2019</span>
                                </p>
                                <div class="progress mt-1 mb-0" style="height: 7px;">
                                    <div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--/ eCommerce & Project statistic -->

<!-- Minimal statistics section start -->
<section id="minimal-statistics">
    <div class="row">
        <div class="col-12 mt-3 mb-1">
            <h4 class="text-uppercase">Plain Statistics Cards</h4>
            <p>Statistics cards with white background.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-3 col-lg-6 col-md-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="align-self-top">
                                <i class="icon-eye icon-opacity info font-large-4"></i>
                            </div>
                            <div class="media-body text-right align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Total Views</span>
                                <h1 class="info mb-0">687,142</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="align-self-top">
                                <i class="icon-users icon-opacity warning font-large-4"></i>
                            </div>
                            <div class="media-body text-right align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Total Customers</span>
                                <h1 class="warning mb-0">8654</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="align-self-top">
                                <i class="icon-basket-loaded icon-opacity success font-large-4"></i>
                            </div>
                            <div class="media-body text-right align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Total Order</span>
                                <h1 class="success mb-0">1562</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="align-self-top">
                                <i class="icon-wallet icon-opacity danger font-large-4"></i>
                            </div>
                            <div class="media-body text-right align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Total Revenue</span>
                                <h1 class="danger mb-0">$18,123</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="media-body text-left align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">New Tickets</span>
                                <h1 class="danger mb-0">6235</h1>
                            </div>
                            <div class="align-self-top">
                                <i class="icon-tag icon-opacity danger font-large-4"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="media-body text-left align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Agents</span>
                                <h1 class="success mb-0">486</h1>
                            </div>
                            <div class="align-self-top">
                                <i class="icon-earphones-alt icon-opacity success font-large-4"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="media-body text-left align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Response Time</span>
                                <h1 class="warning mb-0">18 Hrs</h1>
                            </div>
                            <div class="align-self-top">
                                <i class="icon-speedometer icon-opacity warning font-large-4"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="media-body text-left align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Closed Tickets</span>
                                <h1 class="info mb-0">5681</h1>
                            </div>
                            <div class="align-self-top">
                                <i class="icon-like icon-opacity info font-large-4"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>
<!-- // Minimal statistics section end -->

<!-- Minimal statistics with bg color section start -->
<section id="minimal-statistics-bg">
    <div class="row">
        <div class="col-12 mt-3 mb-1">
            <h4 class="text-uppercase">Statistics With Gradient Background Color</h4>
            <p>Statistics on cards with gradient background color.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card bg-gradient-x-purple-blue">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="align-self-top">
                                <i class="icon-eye icon-opacity text-white font-large-4 float-left"></i>
                            </div>
                            <div class="media-body text-white text-right align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Total Views</span>
                                <h1 class="text-white mb-0">687,142</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card bg-gradient-x-purple-red">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="align-self-top">
                                <i class="icon-users icon-opacity text-white font-large-4 float-left"></i>
                            </div>
                            <div class="media-body text-white text-right align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Total Customers</span>
                                <h1 class="text-white mb-0">8654</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card bg-gradient-x-blue-green">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="align-self-top">
                                <i class="icon-basket-loaded icon-opacity text-white font-large-4 float-left"></i>
                            </div>
                            <div class="media-body text-white text-right align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Total Order</span>
                                <h1 class="text-white mb-0">1562</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card bg-gradient-x-orange-yellow">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="align-self-top">
                                <i class="icon-wallet icon-opacity text-white font-large-4 float-left"></i>
                            </div>
                            <div class="media-body text-white text-right align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Total Revenue</span>
                                <h1 class="text-white mb-0">$18,123</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card bg-gradient-directional-warning">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="media-body text-white text-left align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">New Tickets</span>
                                <h1 class="text-white mb-0">6235</h1>
                            </div>
                            <div class="align-self-top">
                                <i class="icon-tag icon-opacity text-white font-large-4 float-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card bg-gradient-directional-success">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="media-body text-white text-left align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Agents</span>
                                <h1 class="text-white mb-0">486</h1>
                            </div>
                            <div class="align-self-top">
                                <i class="icon-earphones-alt icon-opacity text-white font-large-4 float-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card bg-gradient-directional-danger">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="media-body text-white text-left align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Response Time</span>
                                <h1 class="text-white mb-0">18 Hrs</h1>
                            </div>
                            <div class="align-self-top">
                                <i class="icon-speedometer icon-opacity text-white font-large-4 float-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card bg-gradient-directional-info">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="media-body text-white text-left align-self-bottom mt-3">
                                <span class="d-block mb-1 font-medium-1">Closed Tickets</span>
                                <h1 class="text-white mb-0">5681</h1>
                            </div>
                            <div class="align-self-top">
                                <i class="icon-like icon-opacity text-white font-large-4 float-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // Minimal statistics with bg color section end -->
</div>

<script type="text/javascript">
lucky.require('card', lucky.factory('card'));
</script>